<template>
  <span>
    <el-button
      style="width: 10px; height: 10px"
      icon="ArrowUpBold"
      @click="moveClick('top')"
      @dblclick="moveDblclick('topMost')"
      circle
    />
    <el-button
      style="width: 10px; height: 10px"
      icon="ArrowDownBold"
      @click="moveClick('bottom')"
      @dblclick="moveDblclick('bottomMost')"
      circle
    />
  </span>
</template>
<script setup>
import { ref } from 'vue'
// 字段配置列表
const props = defineProps(['row', 'requestApi'])
const timer = ref(null)
// 编辑成功事件/通知父组件刷新
const emit = defineEmits(['moveOk'])
// 单击移动
function moveClick(type) {
  // 清除之前的单击定时器
  if (timer.value) clearTimeout(timer.value)
  // 设置一个新的单击定时器
  timer.value = setTimeout(() => {
    move(type)
  }, 200) // 200毫秒内如果再次触发click，则清除此定时器
}
// 双击移动
function moveDblclick(type) {
  // 清除单击定时器，防止单击事件被触发
  if (timer.value) clearTimeout(timer.value)
  move(type)
}

// 移动
function move(type) {
  props.requestApi.treeMove(type, props.row.id).then(() => {
    // 通知父组件刷新数据
    emit('moveOk')
  })
}
</script>
<style scoped></style>
